<template>
	<view class="static">
		<view class="top">
			<view :class="activeIndex == index?'item active':'item'" v-for="(item,index) in typeList" :key="index" @click="changeType(item,index)">
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="content" v-if="statisList.length>0">
			<view class="total">
				<view class="left">
					<text>{{all_bonus}}</text>
					<text>收入总额</text>
				</view>
				<view class="right">
					<text>{{all_orders}}</text>
					<text>总订单量</text>
				</view>
			</view>
			<view class="content">
				<view class="year" v-if="month.length > 0">
					<view class="monthlist" v-for="(item,index) in month" :key='index'>
						<view class="monthMsg">
							<view class="title">
								{{item}}
							</view>
							<view class="monthtotal">
								收入：￥{{statisList[index].total_bonus}} &nbsp; 订单：{{statisList[index].total_orders}}
								<text @click="nextpage(statisList[index].list[0].counts_p)">统计</text>
							</view>
						</view>
						<view class="statisList" v-for="(i,d) in statisList[index].list" :key='d'>
							<view class="list" @click="next(i)">
								<view class="name">
									<text>{{i.title}}</text>
									<text>{{i.money}}</text>
								</view>
								<view class="time">
									{{i.bonus_time}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="statisList" v-for="(i,d) in statisList" :key='d'>
						<view class="list" @click="next(i)">
							<view class="name">
								<text>{{i.title}}</text>
								<text>{{i.money}}</text>
							</view>
							<view class="time">
								{{i.bonus_time}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
        <view v-else>
        	<noData texts="当前时间段暂无订单收益"></noData>
        </view>
	</view>
</template>

<script>
	import {
		storeBonus
	} from "../../../apis/shop/api.js";
	import noData from '../../components/public/no-data.vue';
	export default {
		data() {
			return {
				store_id: "",
				token: "",
				statisList: [],
				type: 'day',
				activeIndex: 0,
				all_bonus: 0,
				all_orders: 0,
				month: [],
				typeList: [{
						name: "今日",
						val: 'day'
					},
					{
						name: "本月",
						val: 'month'
					},
					{
						name: "本年",
						val: 'year'
					},
					{
						name: "时间段",
						val: '2019-05-06,2020-07-11'
					}
				]
			}
		},
		onLoad() {
			this.store_id = uni.getStorageSync("store_id");
			this.token = uni.getStorageSync("token");
			this.getList()
		},
		methods: {
			nextpage(time) {
				uni.navigateTo({
					url: `/pages/shopmanager/cardmanager/StatisticsInfo2?time=${time}`
				})
			},
			getList() {
				let that = this
				storeBonus({
					store_id: that.store_id,
					token: that.token,
					type: that.type
				}).then(res => {
					if (res.code == 1) {
						that.all_bonus = res.data.all_bonus;
						that.all_orders = res.data.all_orders;
						that.statisList = res.data.lists;
						that.month = [];
						that.statisList = []
						if (res.data.lists.length == Number(res.data.lists.length)) {
							that.statisList = res.data.lists
						} else {
							for (var i in res.data.lists) {
								that.month.push(i);
								that.statisList.push(res.data.lists[i])

							}
						}

					}
				})
			},
			changeType(item, index) {
				this.activeIndex = index;
				this.type = item.val;
				this.getList()
			},
			next(i) {

				uni.navigateTo({
					url: "/pages/shopmanager/cardmanager/StatisticsInfo?id=" + i.id
				})
			}
		}
	}
</script>

<style lang="less">
	.static {
		padding-top: 70rpx;
	}

	.top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		border-bottom: 1rpx solid #ccc;

		.item {
			flex: 1;
			height: ;
			text-align: center;
			line-height: 68rpx;

			&.active {
				text {
					color: #E41805;
					border-bottom: 2rpx solid #E41805;
				}
			}

			text {
				font-size: 30rpx;
				color: #333;

			}
		}
	}

	.total {
		display: flex;
		padding: 20rpx 0;

		&>view {
			flex: 1;
			text-align: center;

			text {
				display: block;

				&:nth-child(1) {
					font-size: 30rpx;
					color: #E41805;
					line-height: 54rpx;
				}

				&:nth-child(2) {
					font-size: 24rpx;
					color: #333;
				}
			}
		}
	}

	.monthMsg {
		padding: 30rpx;
		background-color: #f8f8f8;

		.title {
			font-size: 32rpx;
			color: #333;
		}

		.monthtotal {
			font-size: 24rpx;
			color: #999;
			margin-top: 15rpx;

			text {
				float: right;
			}
		}
	}

	.statisList {
		.list {
			padding: 30rpx;

			.name {
				font-size: 30rpx;
				color: #333;

				text {
					&:nth-child(2) {
						float: right;
					}
				}
			}

			.time {
				margin-top: 19rpx;
				color: #999;
				font-size: 24rpx;
			}
		}

	}
</style>
